<template>
  <div class="tab-control">
    <div v-for="(item,index) in titles" 
        :key="index" 
        :class="{active:index === currentIndex}" 
        @click="chooseTab(index)">
      <span>{{item}}</span>
    </div>
  </div>
</template>


<script>
export default {
  name: 'TabControl',
  props: {
    titles: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      currentIndex:0
    }
  },
  methods: {
    chooseTab(idx) {
      this.currentIndex = idx;
    }
  },
}
</script>


<style lang='scss' scoped>
  .tab-control{
    background:#fff;
    width:100%;
    display: flex;
    flex-wrap:nowrap;
    text-align: center;
    height:40px;
    line-height: 40px;
    font-size: 16px;
    div{
      flex:1;
      span {
        padding:5px;
      }
    }
    .active span{
      color:var(--color-tint);
      border-bottom:3px solid var(--color-tint);
    }
  }
</style>
